<section>
    <header class="title">
        <div>
            <nav mat-tab-nav-bar>
                <ng-container *ngFor="let label of ['基本信息', '权限配置']; let index = index">
                    <span mat-tab-link [active]="tabGroup.selectedIndex === index" (click)="tabGroup.selectedIndex = index">
            {{ label }}
          </span>
                </ng-container>
            </nav>
        </div>
        <div class="">
            <button class="btn btn-sm btn-outline-danger" type="button" form="admin_form" *ngIf="admin_info" (click)="delete()">
        删除
      </button>
            <button class="btn btn-sm btn-outline-dark ml-3" type="submit" form="admin_form">保存</button>
        </div>
    </header>
    <main>
        <form id="admin_form" class="g-my-form" [formGroup]="form" (ngSubmit)="submit()">
            <mat-tab-group #tabGroup>
                <mat-tab>
                    <div class="row">
                        <div class="col-5 base-info">
                            <div class="form-group required" *ngIf="!admin_info || admin_info?.parent_admin">
                                <label for="parent">父管理员</label>
                                <ng-container *ngIf="!admin_info; else parentRef">
                                    <select class="form-control" formControlName="level_struct">
                    <option value="" hidden>选择父管理员</option>
                    <option *ngFor="let admin of admin_list" [value]="admin.level_struct">
                      {{ admin.full_name }} ({{ admin.username }})
                    </option>
                  </select>
                                </ng-container>
                                <!-- <input id="parent" type="text" class="form-control" formControlName="level_struct" /> -->
                                <ng-template #parentRef>
                                    <span>{{ admin_info.parent_admin }}</span>
                                </ng-template>
                            </div>

                            <div class="form-group required">
                                <label for="username">登录账户</label>
                                <input id="username" type="text" autocomplete="new-username" class="form-control" formControlName="username" />
                            </div>

                            <div class="form-group required">
                                <label for="full_name">人员姓名</label>
                                <input id="full_name" type="text" autocomplete="new-full_name" class="form-control" formControlName="full_name" />
                            </div>
                            <ng-container *ngIf="!admin_info">
                                <div class="form-group required">
                                    <label for="password">登录密码</label>
                                    <input id="password" type="password" autocomplete="new-password" class="form-control" formControlName="password" />
                                </div>
                                <div class="form-group required">
                                    <label for="confirm">密码确认</label>
                                    <input id="confirm" type="password" autocomplete="new-password" class="form-control" formControlName="confirm" />
                                </div>
                            </ng-container>
                            <div class="form-group">
                                <label for="phone">联系方式</label>
                                <input id="phone" type="text" class="form-control" formControlName="phone" />
                            </div>
                            <div class="form-group">
                                <label for="email">邮箱地址</label>
                                <input id="email" type="text" class="form-control" formControlName="email" />
                            </div>
                            <div class="form-group">
                                <label for="remark">人员备注</label>
                                <input id="remark" type="text" class="form-control" formControlName="remark" />
                            </div>
                        </div>
                        <div class="col-6 avatar-container">
                            <div>
                                <m-image-preview class="avatar-size" [control]="avatarInputRef" [valueType]="'file'" formControlName="photo">
                                    <input type="file" #avatarInputRef />
                                </m-image-preview>
                            </div>
                        </div>
                    </div>
                </mat-tab>
                <mat-tab>
                    <div class="ml-3">
                        <div class="form-group required">
                            <label for="">管理区域</label>
                            <m-zone-select formControlName="area_ids"></m-zone-select>
                        </div>
                        <m-auth-node formControlName="auth_ids"></m-auth-node>
                    </div>
                </mat-tab>
            </mat-tab-group>
        </form>
    </main>
</section>